<template>
  <div class="assess-analysis">
    <div class="left-con">
      <OrganList :source="oragnList" @node-click="onOrganClick"></OrganList>
    </div>
    <div class="right-con">
      <el-scrollbar class="main-scro-box">
        <div class="main-box">
          <div class="main-sec main-sec-flex">
            <div class="main-sec-left">
              <!-- 工作纪实 开始 -->
              <WorkDocumentary :selectParams.sync="selectParams"></WorkDocumentary>
              <!-- 工作纪实 结束 -->
            </div>
            <div class="main-sec-right" v-if="needPeopleAssess">
              <!-- 民主测评 开始 -->
              <EvaluationAnalysis :selectParams.sync="selectParams" :showOrgList="showOrgList"></EvaluationAnalysis>
              <!-- 民主测评 结束 -->
            </div>
          </div>
          <div class="main-sec" v-if="activeOrgInfo.pid !== '-1'">
            <!-- 加减分 开始 -->
            <PlusMinus :selectParams.sync="selectParams"></PlusMinus>
            <!-- 加减分 结束 -->
          </div>
          <div class="main-sec" v-if="activeOrgInfo.pid === '-1'">
            <!-- 评价情况 开始 -->
            <EvaluationSituation :selectParams.sync="selectParams"></EvaluationSituation>
            <!-- 评价情况 结束 -->
          </div>
          <div class="main-sec">
            <!-- 审核评鉴 开始 -->
            <AuditEvaluation :selectParams.sync="selectParams" @min-zhu="changeMinzhu"></AuditEvaluation>
            <!-- 审核评鉴 结束 -->
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import OrganList from './components/OrganList.vue'
import WorkDocumentary from './components/WorkDocumentary'
import EvaluationAnalysis from './components/EvaluationAnalysis.vue'
import PlusMinus from './components/PlusMinus.vue'
import AuditEvaluation from './components/AuditEvaluation.vue'
import EvaluationSituation from './components/EvaluationSituation.vue'
import { listRecursiveOrgan } from '@api/modules/system.js'
export default {
  name: 'AssessAnalysis',
  components: { OrganList, WorkDocumentary, EvaluationAnalysis, PlusMinus, AuditEvaluation, EvaluationSituation },
  props: {},
  data() {
    return {
      selectParams: {
        year: '',
        quarter: '',
        orgId: '',
        pid: '',
      },
      oragnList: [],
      activeOrgInfo: {},
      needPeopleAssess: false,
      showOrgList: true,
    }
  },
  watch: {
    schemeInfo: {
      handler() {
        this.selectParams.year = this.schemeInfo.year
        this.selectParams.quarter = this.schemeInfo.quarter
      },
      deep: true,
    },
  },
  computed: {
    ...mapGetters('indReview', ['schemeInfo']),
  },
  created() {},
  mounted() {
    this.getOrganList()
    if (this.schemeInfo) {
      this.selectParams.year = this.schemeInfo.year
      this.selectParams.quarter = this.schemeInfo.quarter
    }
  },
  methods: {
    async getOrganList() {
      const { status, data } = await listRecursiveOrgan()
      if (status === 200 && data && data.length) {
        this.oragnList = data
      } else {
        this.oragnList = []
      }
    },
    onOrganClick(data) {
      this.activeOrgInfo = data
      this.selectParams.orgId = data.id
      this.selectParams.pid = data.pid
    },
    changeMinzhu(data) {
      this.needPeopleAssess = data
    },
  },
}
</script>
<style lang="scss" scoped>
.assess-analysis {
  display: flex;
  align-items: stretch;
  padding: 20px 0;
  height: 100%;
  .left-con {
    width: 300px;
    height: 100%;
    overflow: auto;
    position: relative;
    border-right: 1px solid #e4eaf0;
  }
  .right-con {
    flex: 1;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    margin-left: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - 300px);

    .main-scro-box {
      height: 100%;
      border-top: 1px solid #ececec;
      .main-box {
        padding: 20px;
        .main-sec {
          margin-bottom: 20px;
          &.main-sec-flex {
            display: flex;
          }
          .main-sec-left,
          .main-sec-right {
            flex: 1;
          }
          .main-sec-left {
            padding-right: 10px;
          }
          .main-sec-right {
            padding-left: 10px;
          }
        }
      }
    }
  }
}
</style>
